// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'rb:styles/util' as *;
@use 'rb:styles/palette' as *;
@use 'rb:styles/responsive' as *;

.rb-layout {
  // this will reset the stacking context,
  // which will allow us to use z-indexes
  display: flex;
  flex-direction: column;
}

.rb-menu-bar {
  background-color: $highlight-color;
  padding: 0 20px;
  margin: 0;
  height: $menu-height;
  line-height: $menu-height;
  display: flex;

  // make dropdown menus overlap whatever
  // is in the content page
  z-index: 2;

  :global(.row) {
    padding: 0;
  }

  a {
    text-decoration: none;
  }

  h1 {
    display: inline-block;
    margin: 0;
    color: $white;
    line-height: $menu-height;

    a {
      color: $white;
      margin-left: 0.2em;
    }
  }

  :global(.column) {
    display: flex;
  }
}

@mixin rb-menu-bar-side {
  flex-grow: 1;
  display: flex;
}

.rb-menu-bar-side-left {
  @include rb-menu-bar-side();

  * {
    margin-right: auto;
  }
}

.rb-menu-bar-side-right {
  @include rb-menu-bar-side();

  * {
    margin-left: auto;
  }
}

.rb-menu-bar-menu {
  flex-grow: 3;
}

.rb-content {
  // lower z-index than menu
  z-index: 1;

  & > :global(.ui.grid:not(.landing-wrapper)) {
    padding: $rb-content-padding;

    @media (max-width: $tablet-width) {
      padding-top: 1em;
    }
  }
}

.rb-pushable {
  // make sure that side bar takes the whole remaining height of the page
  min-height: calc(100vh - #{$menu-height} - var(--extra-bars, 0) * 50px - 50px);
  // unset `transform` which breaks the Sticky filter bar and set `position` here
  // so that rb-pusher positions itself correctly
  transform: unset !important;
  position: relative;

  .rb-pusher:global(.pusher) {
    min-height: calc(100vh - #{$menu-height} - var(--extra-bars, 0) * 50px - 50px);
  }

  .rb-pusher:global(.pusher::after) {
    backdrop-filter: blur(0.5rem);
  }
}

:global(.modals.ui.dimmer) {
  backdrop-filter: blur(0.5rem);
}
